<script setup>
  import { storeToRefs } from 'pinia'
  import { useRouter } from 'vue-router'
  import useHomStore from '@/stores/modules/home'
  import HouseItemV9 from '@/components/house-item-v9/house-item-v9.vue'
  import HouseItemV3 from '@/components/house-item-v3/house-item-v3.vue'

  const homeStore = useHomStore()
  const { houseList } = storeToRefs(homeStore)

  const router = useRouter()

  // 评分
  const itemClick = (item) => {
    router.push("/detail/"+ item.houseId)
  }


</script>

<template>
  <div class="content">
      <h2 class="title">热门精选</h2>
      <div class="list">
        <template v-for="(item, index) in houseList" :key="item.data.houseId">
          <!-- 为组件绑定的事件/属性，实际上是绑定到该组件的根元素上 -->
          <!-- 注意：Vue3中的template元素中可以有多个根组件，需要通过 $attrs 指定绑定的元素 -->
          <house-item-v9
          v-if="item.discoveryContentType === 9" 
          :item-data="item.data"
          @click="itemClick(item.data)"
          />
          <house-item-v3
          v-else-if="item.discoveryContentType === 3" 
          :item-data="item.data"
          @click="itemClick(item.data)"
          />
        </template>
      </div>
    </div>
</template>

<style lang="less" scoped>
  .content {
    padding: 10px 8px;

    .title {
      font-size: 22px;
      padding: 10px;
    }

    .list {
      display: flex;
      flex-wrap: wrap;
    }
  }
</style>